<!doctype html>
<html class="avgrund-ready" lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:https="http://www.w3.org/1999/xhtml">
<head th:replace="layouts::header"></head>
<head>
    <meta charset="UTF-8"/>
    <title>个人资料</title>
    <link href='/css/style.min.css' id='wp-block-library-css' media='all' rel='stylesheet' type='text/css'>
    <link href='/css/style.css' id='b2-style-main-css' media='all' rel='stylesheet' type='text/css'>
    <link href='/css/style1.css' id='b2-style-css' media='all' rel='stylesheet' type='text/css'>
    <link href='/css/style2.css' id='b2-style-inline-css' media='all' rel='stylesheet' type='text/css'>
    <link href='/css/font_1105559_20z9y0k9tc2.css' id='b2-fonts-css' media='all' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <meta content="" name="description">
    <meta content="" name="keywords">
    <link rel='stylesheet' id='custom-style-css' href='/css/myblog.css'
          type='text/css' media='all'>
    <script type='text/javascript' src='/js/jquery.js'>
    </script>
    <script type='text/javascript' src='/js/jquery-migrate.min.js'>
    </script>
    <script type='text/javascript' src='/js/bootstrap.js'>
    </script>
    <script type='text/javascript' src='/js/jquery.icheck.min.js'>
    </script>
    <script type='text/javascript' src='/js/jquery.validate.js'>
    </script>
    <script type='text/javascript' src='/js/jquery.lazyload.min.js'>
    </script>
    <script type='text/javascript' src='/js/myblog.js'>
    </script>
    <style>
        div{filter:alpha(Opacity=80);-moz-opacity:0.99;opacity: 0.99;}
    </style>


</head>

<body class="archive author menu-center">
</body>

<body ondragstart="return false" class="home blog archive author menu-center">


<div class="site-content container" id="content">

    <div class="author wrapper" id="author">
        <div class="box b2-radius author-header">


            <div :style="'background-image:url('+cover+')'" class="mask-wrapper">
                <div class="user-cover-button" v-cloak="" v-show="admin || self">
                    <label class="empty button" for="cover-input"><i
                            class="b2font b2-photo "></i><span>上传封面图片</span></label>
                    <input :disabled="locked" @change="getFile($event,'cover')"
                           accept="image/jpg,image/jpeg,image/png,image/gif" class="b2-hidden-always" id="cover-input"
                           ref="fileInput" type="file">
                </div>
            </div>

<!--            <form method="post" th:action="@{/uploadFile}" enctype="multipart/form-data">-->
<!--                <input type="file" name="file">-->
<!--                <br><br>-->
<!--                <input type="submit" value="提交">-->
<!--            </form>-->

            <div class="user-panel">
                <div class="avatar">
                    <form method="post" th:action="@{/userAccounts/uploadFile}" enctype="multipart/form-data">
                        <img id="img1" th:src="'/static/IconImage/'+${userInformation.iconImage}" style="cursor: pointer;"  onclick="imageOnClick()">

                        <input type="file" name="file" id="file" style="left: -99999px;position: absolute;">

                        <input type="submit" value="提交" id="fileUp" style="left: -99999px;position: absolute;">
                    </form>
                    <script>
                        function imageOnClick(){
                            document.getElementById("file").click();
                        }
                    </script>
                    <script>
                        //选择图片后，预览图片

                        document.getElementById("file").onchange=function(){
                            //1 创建文件读取对象
                            var reader=new FileReader();

                            //文件存储在file表单元素的files属性中，它是一个数组
                            //没有返回值，但是读取完毕后，将读取结果存储在对象的result中
                            var fil=document.getElementById("file").files;
                            reader.readAsDataURL(fil[0]);

                            //当读取成功后触发
                            reader.onload=function(){
                                document.getElementById("img1").src=reader.result;
                                document.getElementById("fileUp").click();
                            };
                        };
                    </script>
                </div>


                <div class="user-panel-info">
                    <div class="">
                        <h1><span id="userDisplayName">
<!--                            -->
                            <a th:text="${userInformation.nickname}"></a>
                            <!--                            -->
                        </span><span class="user-page-lv"><span
                                class="lv-icon user-lv b2-lv1"><i th:text="${userInformation.role}"></i></span></span></h1>
                        <p>这个人很懒，什么都没有留下！</p>
                    </div>
                    <div class="user-panel-editor-button">
                        <div class="user-follow" v-cloak="" v-show="!self && avatar">
                            <button @click="followingAc()" class="" v-if="followed == false"><i
                                    class="b2font b2-jia "></i><span>关注Ta</span></button>
                            <button @click="followingAc()" class="author-has-follow" v-else="">取消关注</button>
                            <button @click="dmsg()" class="empty"><i class="b2font b2-message1 "></i><span>发私信</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="author-table b2-radius mg-t">
            <div class="author-page-right">
                <div class="author-page-right-in box">
                    <div class="user-sidebar">
                        <div class="user-sidebar-info active">
                            <a class="link-block" href=""></a>
                            <p><i class="b2font b2-wode b2-light b2-color "></i>概览</p>
                            <div class="author-sidebar-down">
                                <i class="b2font b2-jiantou-copy-copy "></i></div>
                        </div>
                    </div>
                    <div class="user-sidebar">
                        <div class="user-sidebar-info ">
                            <a class="link-block" href="javascript:"></a>
                            <p><i class="b2font b2-write b2-light b2-color "></i>发布的</p>
                            <div class="author-sidebar-down">
                                <i class="b2font b2-jiantou-copy-copy "></i></div>
                        </div>
                    </div>
                    <div :class="'user-sidebar h0 '+(userData.admin || userData.self ? 'show' : '')" v-cloak="">
                        <div class="user-sidebar-info ">
                            <a class="link-block" href="javascript:"></a>
                            <p><i class="b2font b2-wenzhang b2-light b2-color "></i>订单</p>
                            <div class="author-sidebar-down">
                                <i class="b2font b2-jiantou-copy-copy "></i></div>
                        </div>
                    </div>
                    <div :class="'user-sidebar h0 '+(userData.admin || userData.self ? 'show' : '')" v-cloak="">
                        <div class="user-sidebar-info ">
                            <a class="link-block" href="javascript:"></a>
                            <p><i class="b2font b2-xiazai b2-light b2-color "></i>邀请码</p>
                            <div class="author-sidebar-down">
                                <i class="b2font b2-jiantou-copy-copy "></i></div>
                        </div>
                    </div>
                    <div class="user-sidebar">
                        <div class="user-sidebar-info ">
                            <a class="link-block" href="javascript:"></a>
                            <p><i class="b2font b2-xinaixin b2-light b2-color "></i>关注</p>
                            <div class="author-sidebar-down">
                                <i class="b2font b2-jiantou-copy-copy "></i></div>
                        </div>
                    </div>
                    <div class="user-sidebar">
                        <div class="user-sidebar-info ">
                            <a class="link-block" href="javascript:"></a>
                            <p><i class="b2font b2-fensi b2-light b2-color "></i>粉丝</p>
                            <div class="author-sidebar-down">
                                <i class="b2font b2-jiantou-copy-copy "></i></div>
                        </div>
                    </div>
                    <div class="user-sidebar">
                        <div class="user-sidebar-info ">
                            <a class="link-block" href="javascript:"></a>
                            <p><i class="b2font b2-zhuanti b2-light b2-color "></i>收藏</p>
                            <div class="author-sidebar-down">
                                <i class="b2font b2-jiantou-copy-copy "></i></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="author-page-left box b2-radius">
                <div class="author-page b2-pd">
                    <div id="author-index">
                        <div class="user-info">

                            <p class="b2-pd">
                                <span class="user-info-title">用户ID：</span><span v-text="userData.name">
<!--                            -->
                            <a th:text="${userInformation.username}"></a>
                                <!--                            -->
                            </span>
                            </p>

                            <p class="b2-pd">
                                <span class="user-info-title">性别：</span><span v-text="userData.name">
<!--                            -->
                            <a th:text="${userInformation.sex}"></a>
                                <!--                            -->
                            </span>
                            </p>

                            <p class="b2-pd">
                                <span class="user-info-title">爪机：</span><span v-text="userData.name">
<!--                            -->
                            <a th:text="${userInformation.phone}"></a>
                                <!--                            -->
                            </span>
                            </p>

                            <p class="b2-pd">
                                <span class="user-info-title">邮箱：</span><span v-text="userData.name">
<!--                            -->
                            <a th:text="${userInformation.email}"></a>
                                <!--                            -->
                            </span>
                            </p>

                            <p class="b2-pd">
                                <span class="user-info-title">推特ID：</span><span v-text="userData.name">
<!--                            -->
                            <a th:text="${userInformation.twitter_id}"></a>
                                <!--                            -->
                            </span>
                            </p>

                            <p class="b2-pd">
                                <span class="user-info-title">生日：</span><span v-text="userData.name">
<!--                            -->
                            <a th:text="${userInformation.birthday}"></a>
                                <!--                            -->
                            </span>
                            </p>

                            <p class="b2-pd">
                                <span class="user-info-title">个人简介：</span><span v-text="userData.name">
<!--                            -->
                            <a th:text="${userInformation.info}"></a>
                                <!--                            -->
                            </span>
                            </p>

                                    <a th:href="@{userAccouts/update(id=${userInformation.userId})}" class="btn btn-info btn-sm">更新资料</a>
                                    <a th:href="@{userAccouts/update(id=${userInformation.userId})}" class="btn btn-warning btn-sm"
                                    onclick="if (!(confirm('您确定要注销您的账户吗？'))) return false">注销用户</a>
                        </div>
                    </div>

                    <div @click.stop="" class="aside-container" ref="asideContainer">
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/bootstrap.min.js"></script>

<section class="hidden-xs">
    <ul class="cb-slideshow">
        <li>
                    <span style="background-image:url(/image/img.jpg)">
                    </span>
        </li>
        <li>
                    <span style="background-image:url(/image/img1.jpg)">
                    </span>
        </li>
        <li>
                    <span style="background-image:url(/image/img2.jpg)">
                    </span>
        </li>
        <li>
                    <span style="background-image:url(/image/img3.jpg)">
                    </span>
        </li>
        <li>
                    <span style="background-image:url(/image/img4.jpg)">
                    </span>
        </li>
        <li>
                    <span style="background-image:url(/image/img5.jpg)">
                    </span>
        </li>
    </ul>
</section>
<div class="GalMenu GalDropDown">
    <div class="circle" id="gal">
        <div class="ring">
            <a href="" title="" class="menuItem" style="left: 50%; top: 15%;">
                首页
            </a>
            <a href="" title="" class="menuItem" style="left: 80.3109%; top: 32.5%;">
                首页
            </a>
            <a href="" title="" class="menuItem" style="left: 80.3109%; top: 67.5%;">
                首页
            </a>
            <a href="" title="" class="menuItem" style="left: 50%; top: 85%;">
                首页
            </a>
            <a href="" title="" class="menuItem" style="left: 19.6891%; top: 67.5%;">
                首页
            </a>
            <a href="" title="" class="menuItem" style="left: 19.6891%; top: 32.5%;">
                首页
            </a>
        </div>
        <audio id="audio" src="https://ercygame.com/wp-content/themes/mygalgame/ui/audio/onj.mp3">
        </audio>
    </div>
</div>
<div id="overlay" class="magnify">
    <div class="large" style="background-image:url(/image/img6.jpg)">
    </div>
    <img class="small" src="/picture/rpic.png" width="1920">
    <footer id="zan-footer">
        <div class="container">
            <div class="row">
                        <span>
                            <span>
                                <script src="/js/myblog_bd.js">
                                </script>
                                <script src="/js/myblog_min.js">
                                </script>
                            </span>
                        </span>
            </div>
            <!--统计代码-->
            <!--统计代码结束-->
        </div>
    </footer>
    <div id="zan-gotop">
        <i class="fa fa-angle-up">
        </i>
    </div>



</div>
</body>
</html>